Day5 JavaScript学习 - 表单验证

根据一万个小时的理论，也就是说不管是什么内容，持续坚持学习一万个小时，你也就变成了个中高手。那么一个万个小时是多长概念呢，对于一个业余爱好来说大概是多长时间呢？假设每天能平均抽出2个小时来学习，那麽一年下来是：2*365=730小时，一万个小时就是10000/730=13.7年。哇，不想了，接着学习吧，如果真的喜欢，那便是快乐，与其他无关。

今天学习的内容是表单验证，这个要多普遍就有多普遍，基本上所有的网站都要用到这个。注册、登录、评论等等，只要是想往服务器POST信息的，基本上都要用到form，好了，接着看例子。

1
2
3
4
5
6
7
8
<form action="#" id="test-form" onsubmit="return checkForm()">
  <div><span class="text">username:</span><input type="text" name="username" id="username"></div>
  <div><span class="text">password:</span><input type="text" name="password" id="password"></div>
  <div><span class="text">re-password:</span><input type="text" name="password2" id="password2"></div>
  <div id="error" class="text"></div>
  <button type="submit" name="submit">Submit</button>
  <button type="reset" name="reset">Reset</button>
</form>

用户名，密码是注册登录界面最基本的元素，还有好多基本的元素就不一一写出来了，那些东西都是练习得多了，自然就会了。关键还是在代码量。

实现功能：

  1. 用户名要求数字，字母3-10位；
  2. 密码要求6-12位；
  3. 两次密码输入要一致；

  • 第一个要点要使用到正则表达式来匹配

    • 用户名匹配用/^[0-9a-zA-Z]{3,10}$/
    • 密码匹配用到/^.{6-12}$/；

  • 第二个要点就是表单提交的方法

    • 一是使用了表单的submit()方法； 

      document.getElementById("formId").submit()

    • 二是浏览器默认提交方法<b utton type="submit">，使用submit类型的button按钮来提交，这种方法需要在form中添加onsubmit属性值。

主要内容就是这些，那么接下来就是代码实现了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function checkForm() {
  var form = document.getElementById('test-form');
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var rePassword = document.getElementById('password2').value;
  var error = document.getElementById('error');
  // 不允许为空
  if (username.length <= 0 || password.length <= 0 || password2 <= 0){
    error.innerHTML = "not allow empty";
    return false;
  }
  // 用户名为字符数字，3到10位
  var reg_username = /^[0-9a-zA-Z]{3,10}$/;
  if(!reg_username.test(username)){
    error.innerHTML = "username is not valid, please retry";  
    return false;
  }
  // 密码需为6到12位
  var reg_password = /^.{6,12}$/;
  if(!reg_password.test(password)){
    error.innerHTML = "password is not valid, please retry";
    return false;
  }
  // 两次输入密码需一致
  if (password != rePassword) {
    error.innerHTML = "inconsistent password";
    return false;
  }
  error.innerHTML = "Success";
  alert("Access Success");
  return true;
}

直接点击这里，查看效果。

技术, JavaScript
表单验证